<template>
    <div id="userMsg">
        <navbar :title="title"></navbar>
        <div class="placeholder"></div>
        <div class="main">
            <div class="wrapper">
                <h3>个人信息</h3>
                <div class="item">
                    <div class="name">头像</div>
                    <div class="msg">
                        <van-uploader :after-read="afterRead" ></van-uploader>
                        <p class="user-avator" v-if="userInfo.avatar">
                            <img :src="userInfo.avatar" alt="">
                        </p>
                        <p class="user-avator-default" v-else></p>
                        <i class="icon iconfont">&#xe601;</i>
                    </div>
                </div>
                <div class="item username">
                    <div class="name">用户名</div>
                    <div class="msg">
                        <span>{{userInfo.username}}</span>
                    </div>
                </div>
                <div class="item">
                    <div class="name">昵称</div>
                    <div class="msg">
                        <span v-if="userInfo.nickname" @click="showModal(1)">{{userInfo.nickname}}</span>
                        <span v-else @click="showModal(1)">未设置</span>     
                        <i class="icon iconfont">&#xe601;</i>
                    </div>
                </div>
                <div class="item">
                    <div class="name">性别</div>
                    <div class="msg">
                        <span v-if="userInfo.sex==2" @click="showModal(2)">女</span>
                        <span v-else-if="userInfo.sex==1" @click="showModal(2)">男</span>
                        <span v-else @click="showModal(2)">未填写</span>
                        <i class="icon iconfont">&#xe601;</i>
                    </div>
                </div>
                <div class="item">
                    <div class="name">联系QQ</div>
                    <div class="msg">
                        <span v-if="userInfo.qq" @click="showModal(3)">{{userInfo.qq}}</span>
                        <span v-else @click="showModal(3)">未设置</span>     
                        <i class="icon iconfont">&#xe601;</i>
                    </div>
                </div>
            </div>
            <div class="wrapper">
                <h3>账号安全信息</h3>
                <div class="item" v-if="userInfo.phone">
                    <div class="name">换绑手机</div>
                    <div class="msg">
                        <router-link to="/unBindPhone" tag="span">{{userInfo.phone|phoneFilter}}</router-link>
                        <i class="icon iconfont">&#xe601;</i>
                    </div>
                </div>
                <div class="item" v-else>
                    <div class="name">绑定手机</div>
                    <div class="msg">
                        <router-link to="/bindPhone" tag="span">未绑定</router-link>
                        <i class="icon iconfont">&#xe601;</i>
                    </div>
                </div>
                <div class="item">
                    <div class="name">实名认证</div>
                    <div class="msg">
                        <router-link to="/realName"  v-if="userInfo.is_auth==0" tag="span">
                            未认证
                        </router-link>
                        <span v-else style="margin-right:0.4rem;">已认证</span>
                        <i class="icon iconfont" v-show="userInfo.is_auth==0">&#xe601;</i>
                    </div>
                </div>
                <div class="item">     
                    <div class="name">修改密码</div>
                    <router-link to="/editPassword" tag="div" class="msg" style="padding-left:1rem;">
                            <i class="icon iconfont">&#xe601;</i>
                    </router-link>
                </div>
            </div>
        </div>
        <div class="loginOut">
            <button @click="userLogOut">退出</button>
        </div>
        <van-popup v-model="show" class="modal">
            <div class="container">
                <div class="nickName-modal" v-if="tab==1">
                    <div class="top">
                        <i class="icon iconfont" @click="closeModal">&#xe60e;</i>
                        设置昵称
                    </div>
                    <div class="input-wrapper">
                        <input type="text" placeholder="请输入昵称" v-model="nickname" ref="nickName">
                    </div>
                    <span @click="editNickname">确定</span>
                </div>
                <div class="sex-modal" v-if="tab==2">
                    <div class="top">
                        <i class="icon iconfont" @click="closeModal">&#xe60e;</i>
                        选择性别
                    </div>
                    <div class="sex-wrapper">
                        <span @click="choiceSex(1)" :class="{active:sex==1}">男</span>
                        <span @click="choiceSex(2)" :class="{active:sex==2}">女</span>
                    </div>
                    <span @click="setSex">确定</span>
                </div>
                <div class="nickName-modal" v-if="tab==3">
                    <div class="top">
                        <i class="icon iconfont" @click="closeModal">&#xe60e;</i>
                        设置QQ
                    </div>
                    <div class="input-wrapper">
                        <input type="text" placeholder="请输入QQ" v-model="qq">
                    </div>
                    <span @click="setQq">确定</span>
                </div>
            </div>
        </van-popup>
        <router-view></router-view>
    </div>
</template>

<script>
    import navbar from 'common/navbar'
    import { Toast } from 'vant'
    import { mapState,mapMutations} from 'vuex'
    import {getUserInfo,setAvator,editUserInfo} from 'api/game_box'
    import {logOut} from 'api/login'
    export default {
        data(){
            return{
                title:'个人资料',
                nickname:'',
                show:false,
                tab:0,
                sex:0,
                qq:''
            }
        },
        created(){
           this.nickname=this.userInfo.nickname;
           this.sex=!this.userInfo.sex?0:this.userInfo.sex;
           this.qq=!this.userInfo.qq?'':this.userInfo.qq;
        },
        filters:{
            phoneFilter(phone){
               return  phone.substr(0, 3) + '****' + phone.substr(7); 
            }
        },
        methods:{
            showModal(num){
               this.tab=num;
               this.show=true;
               if(this.tab==1){
                 this.$nextTick(()=>{
                     this.$refs.nickName.focus();
                  })
               }
            },
            closeModal(){
                this.show=false;
            },
            editNickname(){
                if(this.nickname.length>8){
                    Toast("昵称不能超过8位");
                    return
                }
                editUserInfo(this.nickname,this.sex,this.qq).then(res=>{
                    if(res.data.error==0){
                        this.userInfo.nickname=this.nickname;
                        this.show=false;
                    }else{
                        this.show=false;
                    }
                })
            },
            setSex(){
                editUserInfo(this.userInfo.nickname,this.sex,this.qq).then(res=>{
                    if(res.data.error==0){
                        this.userInfo.sex=this.sex;
                        this.show=false;
                    }else{
                        this.show=false;
                    }
                })
            },
            setQq(){
                editUserInfo(this.userInfo.nickname,this.sex,this.qq).then(res=>{
                    if(res.data.error==0){
                        this.userInfo.qq=this.qq;
                        this.show=false;
                    }else{
                        this.show=false;
                    }
                })
            },
            choiceSex(num){
                this.sex=num;
            },
            userLogOut(){
                logOut().then(res=>{
                    if(res.data.error==0){
                         Toast('成功退出');
                         this.SET_LOGININFO("");
                         this.SET_USERINFO("");
                         sessionStorage.removeItem('bindPhone');
                         sessionStorage.removeItem('storge');
                         this.$router.push({
                            path: '/user'
                        });
                    }
                })
            },
            afterRead(file){
                Toast.loading({
                    duration:0,
                    mask: false,
                    loadingType: 'spinner',
                    message: '上传中...'
                });
                let base64=file.content;
                base64=base64.replace(/^data:image\/(jpeg|png|gif);base64,/, "");
                setAvator(base64).then(res=>{
                   if (res.data.error == 0) {
                        res = res.data.content;
                        this.userInfo.avatar=res;
                        Toast.clear();
                   }else{
                       Toast.clear();
                   }
                })   
            },
            ...mapMutations(['SET_LOGININFO','SET_USERINFO'])
        },
        computed:{
            ...mapState(['loginInfo','userInfo']),
        },
        components:{
            navbar
        },
        destroyed(){
            Toast.clear();
        }
    }
</script>

<style scoped lang="scss">
   @import '~styles/variable.scss';
   @import '~styles/mixins.scss';
    .slide-enter-active, .slide-leave-active{
        transition: all 0.3s;
    }
    .slide-enter, .slide-leave-to{
        transform: translate3d(100%, 0, 0);
    }
    #userMsg{
        width:7.5rem;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 50%;
        bottom: 0;
        right: 0;
        background: #fff;
        transform:translateX(-50%);
        h3{
           font-size: 0.3rem;
           padding: 0.3rem 0.32rem 0.3rem 0.32rem;
           background:#fff;
        }
        .main{
            background:#f5f5f5;
            .wrapper{
                margin-bottom:0.18rem;
                background: #ffff;
                &:last-child{
                    margin-bottom:0;
                }
            }
            .item{
                display:flex;
                align-items: center;
                justify-content: space-between;
                height:0.9rem;
                line-height:0.9rem;
                background:#fff;
                padding:0 0.32rem;
                border-bottom:1px solid #cdced3;
                font-size:0.3rem;
                .msg{
                    display:flex;
                    .user-avator{
                        margin-right:0.16rem;
                        width:0.86rem;
                        height:0.86rem;
                        img{
                            width:100%;
                            height:100%;
                            border-radius:50%;
                        }
                    }
                    .user-avator-default{
                        margin-right:0.16rem;
                        width:0.86rem;
                        height:0.86rem;
                        background-size:100% 100%;
                        @include bg-image('../../assets/image/icon_touxiang');
                    }
                    span{
                        margin-right:0.1rem;
                        color:#979797;
                    }
                    .icon{
                         color:$color-focus;
                         font-size:0.4rem;
                    }
                }
                &:last-child{
                    border:none;
                }
            }
            .username{
                span{
                    margin-right:0.5rem !important;
                }
            }
        }
        .loginOut{
            position:fixed;
            bottom:0;
            left:0;
            display:flex;
            justify-content: center;
            align-items: center;
            width:100%;
            height:1.38rem;
            button{
                width:5rem;
                height:0.9rem;
                line-height:0.9rem;
                border-radius:0.45rem;
                background:$color-focus;
                color:#fff;
                font-size:$font-size-l;
                border:none;
            }
        }
    }
    .modal{
        top:31.5%;
        .container{
            width:7rem;
            height:auto;
            background:#fff;
            text-align:center;
            font-size:$font-size-m;
            .top{
                position:relative;
                height:0.86rem;
                line-height:0.86rem;
                text-align: center;
                color:$color-focus;
                border-bottom:1px solid #f2f2f2;
                .icon{
                    position:absolute;
                    top:0;
                    left:0.36rem;
                    font-size:0.4rem;
                    color:#555;
                    font-weight:bold;
                }
            }
            .input-wrapper{
                input{
                    display:block;
                    width:6.66rem;
                    height:0.92rem;
                    line-height:0.92rem;
                    border:1px solid #f2f2f2;
                    margin:0.2rem auto;
                    padding:0 0.25rem;
                    border-radius:5px; 
                }
            }
            .sex-wrapper{
                span{
                    display:block;
                    height:0.8rem;
                    line-height:0.8rem;
                    color:#666;
                    border-bottom:1px solid #f2f2f2;
                }
                .active{
                    color:$color-focus;
                }
            }
            span{
                padding:0 0.2rem;
                line-height:0.86rem;
                color:$color-focus;
                font-size:$font-size-m;
            }
        }
    }
    .placeholder{
        width:100%;
        height:0.8rem;
    }
</style>